<template>
  <div class="result-container">
    <div class="title-wrap">
      <h2 class="title">{{this.$route.query.id}}</h2>
      <span class="sub-title">找到{{total}}个结果</span>
    </div>
    <el-tabs v-model="activeIndex" @tab-click="sendID">
      <el-tab-pane label="歌曲" name="1">
        <table class="el-table">
          <thead>
            <th></th>
            <th>音乐标题</th>
            <th>歌手</th>
            <th>专辑</th>
            <th>时长</th>
          </thead>
          <tbody>
            <tr style="cursor: pointer" class="el-table__row" v-for="(item,index) in micArr" :key="index" @click="sendMic(item.id,micArr)">
              <td>{{index+1}}</td>
              <td>
                <div class="song-wrap">
                  <div class="name-wrap">
                    <span>{{item.name}}</span>
                    <span v-if="item.mvid!=0" class="iconfont icon-mv"></span>
                  </div>
                  <span>{{item.album.name}}</span>
                </div>
              </td>
              <td>{{item.artists[0].name}}</td>
              <td>{{item.album.name}}</td>
              <td>{{item.duration|time}}</td>
            </tr>


          </tbody>
        </table>
      </el-tab-pane>
      <el-tab-pane label="歌单" name="1000">
        <div class="items">
          <div class="item" v-for="(item,index) in gdArr" :key="index" @click="sendMenu(item.id)">
            <div class="img-wrap">
              <div class="num-wrap">
                播放量:
                <span class="num">{{item.playCount|num}}</span>
              </div>
              <img :src="item.coverImgUrl" alt="" />
              <span class="iconfont icon-play"></span>
            </div>
            <p class="name">{{item.track.name}}</p>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="MV" name="1004">
        <div class="items mv">
          <div class="item" v-for="(item,index) in mvArr" :key="index" @click="goMv(item.id)">
            <div class="img-wrap">
              <img :src="item.cover" alt="" />
              <span class="iconfont icon-play"></span>
              <div class="num-wrap">
                <div class="iconfont icon-play"></div>
                <div class="num">{{item.playCount|num}}</div>
              </div>
              <span class="time">{{item.duration|time}}</span>
            </div>
            <div class="info-wrap">
              <div class="name">{{item.name}}</div>
              <div class="singer">{{item.artistName}}</div>
            </div>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
    <!-- 页码的区域 -->
    <el-pagination
      background
      layout="prev, pager, next"
       @current-change="handleCurrentChange"
      :current-page.sync="page"
      :page-size="30"
      :total="total">
    </el-pagination>
  </div>
</template>

<script>
import {getResult} from '@/api/result'
import {getLunBoMusic} from"@/api/getMusic"
export default {
  name: 'result',
  data() {
    return {
      activeIndex: "1",
      total:0,
      micArr:[],
      gdArr:[],
      mvArr:[],
      page:1,
      offset:0
    };
  },
  created() {

    this.getMsg()
  },
  methods: {
    // 点击mv去往mv的页面
    goMv(id){
      // 点击去往mv页面
      this.$router.push({
        name:'mv',
        query:{
          id
        }
      })
    },
    // 点击歌单进行页面的跳转
    sendMenu(id){
        this.$router.push({
          name:'playlist',
          query:{
            id
          }
        })
    },
    // 点击播放歌曲
   async sendMic(id,item){
    //  发送数据的请求获取播放的数据
      const {data:{data}}=await getLunBoMusic(id)
      // 判断歌曲的播放路径是否存在
      if(data[0].url){
        this.$store.commit('getUrl',data[0].url)
        // 保存id
         this.$store.commit('getId',id)
         console.log(id,item);

      }
    },
    // 点击进行数据的切换
    sendID(){
      console.log(this.activeIndex);
      // 回到第一页
      this.page=1
      // 位偏移等于0
      this.offset=0
      this.getMsg()

    },
   async getMsg(){
      const {data}=await getResult({
        keywords:this.$route.query.id,
        limit:30,
        offset:this.offset,
        type:this.activeIndex
      })

    //  判断的当前的位置
    if(this.activeIndex==='1'){
     this.total=data.result.songCount
     this.micArr=data.result.songs
    //  将数据保存到vuex中
    this.$store.commit('getArr',data.result.songs)
    }
    else if(this.activeIndex==='1000'){
    this.total=data.result.playlistCount
     this.gdArr=data.result.playlists
    }else{
    this.total=data.result.mvCount
    this.mvArr=data.result.mvs
    }
    },
     handleCurrentChange(val) {
        this.page=val
        this.offset=(this.page-1)*30
        // 调用接口
        this.getMsg()
      }
  },
  // 监听路由的变化,进行页面的搜索
  watch: {
      '$route':function(){
      this.getMsg()
      }
  },
};
</script>

<style >

</style>
